import { useState } from "react"

/* 
为组件定义类型 ，本质是给函数的参数做类型注解，可以使用type对象类型或者interface接口来做注解

说明：
- Child组件只能传入名称为value的prop参数，类型为string, 且为必填
- 如果需要传递子节点 那么加上children属性  类型是 React内部的React.ReactNode
- 需要传递事件 也可以为事件prop添加类型


children是一个比较特殊的prop, 支持多种不同类型数据的传入，需要通过一个内置的ReactNode类型来做注解
React.ReactElement 、string、number、React.ReactFragment 、React.ReactPortal 、boolean、 null 、undefined
*/

interface Props  {
  value: string
  children: React.ReactNode
  onChange?:()=> void // 如果有参数也可以指定参数类型  onChange? : (msg:string) => void 
}

const Child = ( props :Props ) => {
  const {value ,children,onChange  } = props
  return (
    <div>
    子组件 接收到的props: {value}
    <button onClick={onChange} >{children} </button>
    </div>
  )
}


function App() { 
  const [ value ,setValue ] = useState('active')

  // 方法
  const changeValue = () => {
    setValue('newActive')
  }

  return (
    <div> this is  App
      <Child value={value} > 演示 </Child>
      <Child value="2" onChange={changeValue} >
        <span>传递一次方法</span>
      </Child>
    </div>
  )
}

export default App
